<template>
    <el-container class="courseBody" :style="{height: duration*60 + 'px', backgroundColor: myColor.bgColor}" @click="setCourse">
      <div class="courseHead">
        <span :style="{ color:  myColor.fontColor}">{{brief.room.length > 8 ? (brief.room.slice(0, 8) + '...') : brief.room}}</span>
      </div>
      <div class="courseMain">
        <span :style="{ color:  myColor.fontColor}">{{brief.crname.length > 10 ? (brief.crname.slice(0, 10) + '...') : brief.crname}}</span>
      </div>
    </el-container>
</template>

<script lang="ts">
export default {
  name: 'courseItem',
  props: {
    cno: String,
    brief: {
      room: String,
      crname: String
    },
    myColor: {
      bgColor: String,
      fontColor: String
    },
    duration: Number,
    time: String
  },
  emits: ['setCourse'],
  setup (props: any, context: any) {
    function setCourse () {
      context.emit('setCourse', props.cno, props.time, props.myColor)
    }
    return {
      setCourse
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/Fonts/FontMap/FontMap";
@import "../../../assets/Fonts/FontMap/FontList.css";
.courseBody{
  width: 100%;
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 5px;
  cursor: pointer;
  .courseHead .courseMain{
    width: 100%;
  }
  .courseHead{
    height: 20px;
    display: flex;
    align-items: center;
    color: white;
    font-family: $SH_Serif_Regular;
    padding: 0;
    justify-content: flex-start;
    span{
      width: 100%;
      text-align: left;
      font-size: 14px;
      white-space: normal;
      word-break: break-all;
      word-wrap: break-word;
    }
  }
  .courseMain{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-family: $SH_Serif_Regular;
    color: white;
    span{
      width: 100%;
      text-align: left;
      font-weight: bold;
      white-space: normal;
      word-break: break-all;
      word-wrap: break-word;
    }
  }
}
</style>
